<!--author:王佳欣-->
<!DOCTYPE html>
<html>
<head>
<title>注册</title>
	<script type='text/javascript' src='js/jquery.min.js'></script>
	<script type='text/javascript' src='js/plugins.js'></script>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="New Theme Forms template Responsive, Login form web template,Flat Pricing tables,Flat Drop downs  Sign up Web Templates, Flat Web Templates, Login sign up Responsive web template, SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
	<script type="application/x-javascript">addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
	<!-- Custom Theme files -->
	<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
	<!-- //Custom Theme files -->
	<!-- web font -->
	<link href="//fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
	<!-- //web font -->
	<style>
		.button{
			font-size: 1em;
			color: #fff;
			background: transparent;
			border: 1px solid #fff;
			outline: none;
			cursor: pointer;
			padding: .6em 1em;
			-webkit-appearance: none;
			width: 100%;
			margin-top: 2em;
			transition: 0.5s all;
			-webkit-transition: 0.5s all;
			-moz-transition: 0.5s all;
			-o-transition: 0.5s all;
			-ms-transition: 0.5s all;
		}
		.button:hover {
			background: #FF9800;
			letter-spacing: 3px;
			color: #fff !important;
			border-color: #ff9800 !important;
		}
		#message,#messageTwo,#inputId{
			/*display: inline-block;!*不独占一行*!*/
			color: red;
			font-size: 8px;
			/*padding-left: 20px !*做内边距*!*/
		}
		#prompt,#inputId2{
			color: #ff00ae;
			font-size: 8px;
		}
	</style>
</head>
<body>
	<!-- main -->
	<div class="main">
		<h1>别叫我oj注册界面</h1>
		<div class="main-w3lsrow" style="display: flex; justify-content: center">
			<!-- login form -->
			<!-- sign up form -->
			<div class="login-form login-form-left" >
				<div class="agile-row" >
					<h2>注册</h2>
					<div class="login-agileits-top" >
						<form>
							<p>学号</p>
							<!--							required表示必填项-->
							<input type="text" id="id" class="id" name="id" required="" onfocus="checkId2()" onblur="checkId()">
							<p id="inputId" hidden="hidden">学号格式错误！请输入十位数的数字</p>
							<p id="inputId2" hidden="hidden">请输入十位数的学号</p>
							<p>用户名</p>
<!--							required表示必填项-->
							<input type="text" id="username" class="name" name="username" required="">
							<p>性别</p>
							<div class="dxan">
								<label class="radio-inline">
									<input checked="checked" type="radio" name="gender" id="male" value="M"> 男
								</label>
								<label class="radio-inline">
									<input type="radio" name="gender" id="female" value="F"> 女
								</label>
							</div>
							<p>密码</p>
							<input type="password" id="password" class="password" name="password" required="" onfocus="prompt()" onblur="checkPassword()">
							<p id="message" hidden="hidden">您输入的密码格式错误！</p>
							<p id="prompt" hidden="hidden">长度6~16位，必须由数字和大小写字母组成！</p>
							<p>确认密码</p>
							<input type="password" id="confirmPassword" class="password" name="password" required="" onfocus="message()" onblur="checkIsSame()">
							<p id="messageTwo" hidden="hidden">请确认两次输入密码相同！</p>
							<input type="button" value="注册" onclick="register()">
						</form> 	
					</div>  
				</div>  
			</div> 
			<div class="clear"> </div>	 
		</div>	
	</div>
	<script type="text/javascript">
		var password = $("#password").val();
		function prompt(){
			document.getElementById("prompt").style.display="inline";
			document.getElementById("message").style.display="none";
		}
		function message(){
			document.getElementById("prompt").style.display="none";
			document.getElementById("message").style.display="none";
		}
		function register(){
			//判断选中了哪一个
			let checked = $("input[name='gender']:checked");
			let gender = checked.attr("value");
			let password=$("#password").val();
			//用md5加密密码
			let md5_password=hex_md5(password);
			let user={
				"id" : $("#id").val(),
				"username" : $("#username").val(),
				"password" : md5_password,
				"gender" :gender,
				"acCount":0
			};
			let confirmPassword = $("#confirmPassword").val();
			console.log(confirmPassword);
			if(isEmpty(user.id)||isEmpty(password)){
				alert("学号或密码不能为空！")
			}else if(checkPwd(password)=="缺少内容,请确认是否同时包含大小写字母和数字"){
				// alert("密码格式要求:长度6~16位，必须由数字、大写字母、小写字母组成")
				document.getElementById("prompt").style.display="none";
				document.getElementById("message").style.display="inline";
				document.getElementById("message").innerText="缺少内容,请确认是否同时包含大小写字母和数字!";
			}else if(checkPwd(password)=="长度不合格"){
				document.getElementById("prompt").style.display="none";
				document.getElementById("message").style.display="inline";
				document.getElementById("message").innerText="长度不合格!长度6~16位";
			}else if(confirmPassword!=password){
				document.getElementById("messageTwo").style.display="inline";
				document.getElementById("messageTwo").innerText="请确认两次输入密码相同!";
			}else{
				$.ajax({
					//注册连接的url
					url:"http://192.168.2.5:8010/user/register",
					type:"post",
					contentType:'application/json; charset=utf-8',
					data:JSON.stringify(user),
					success: function (data) {
						let code=data.code;
						if(code==="200"){
							localStorage.setItem("userId",$("#id").val());
							localStorage.setItem("password",md5_password);
							window.location.href="index.html";
						}else if(code==="500"){
							alert("该用户已经被注册了！");
							// window.location.href="login.html";
						}
					},
				})
			}
		}

		console.log($("#confirmPassword"))
		//判断字符串是否为空的函数 true表示是空字符串
		function isEmpty(name) {
			if(name === '' || name.trim().length === 0){
				return true;
			}else{
				return false;
			}
		}

		// 密码格式要求:长度6~16位，必须由数字、大写字母、小写字母组成
		// 给一个密码字符串，判断密码是否合格
		// asdfasdfASDF - 判断是否符合要求
		// 1.长度 2.组成部分
		// 定义对象，存储包含的内容
		function checkPwd(password){
			var obj = {}
			if(password.length >= 6 && password.length <= 16) {
				// 长度没问题
				// console.log('长度ok');
				// 是否同时包含了3样内容 - 遍历字符串
				for(var a=0; a<password.length; a++) {
					// 每个字符 - password[a]
					// 都要判断是否是数字 - 获取字符的阿斯克码
					var code = password.charCodeAt(a)
					// 判断阿斯克码是否在数字范围内
					if(code >= 48 && code <= 57) {
						// 在数字范围内
						obj.shuzi = true
					}
					// 判断是否包含了大写字母
					else if(code >= 65 && code <= 90) {
						obj.daxie = true
					} else if(code >= 97 && code <= 122) {
						obj.xiaoxie = true
					}
				}
				// 判断对象中是否有3个键值对
				// 计数
				var k = 0
				for(var key in obj) {
					k++
				}
				if(k === 3) {
					// 同时包含了3个东西
					return true;
				} else {
					return "缺少内容,请确认是否同时包含大小写字母和数字";
				}
			} else {
				return "长度不合格";
			}
		}

		function idType(id){
			var boolean = false;
			for(var a=0; a<id.length; a++) {
				// 每个字符 - password[a]
				// 都要判断是否是数字 - 获取字符的阿斯克码
				var code = id.charCodeAt(a)
				// 判断阿斯克码是否在数字范围内
				if(code >= 48 && code <= 57) {
					// 在数字范围内
					boolean = true;
				}
				// 判断是否包含其他
				else if(code >= 65 && code <= 90) {
					boolean = false;
				} else if(code >= 97 && code <= 122) {
					boolean = false;
				}
				else{
					boolean = false;
				}
			}
			return boolean;
		}

		function  checkId(){
			document.getElementById("inputId2").style.display="none";
			if ($("#id").val().length==10 && idType($("#id").val())==true){
				document.getElementById("inputId").style.display="none";
			}else{
				document.getElementById("inputId").style.display="inline";
			}
		}
		function  checkId2(){
			if ($("#id").val().length<10){
				document.getElementById("inputId2").style.display="inline";
				document.getElementById("inputId").style.display="none";
			}else{
				document.getElementById("inputId2").style.display="none";
			}
		}
		function checkIsSame(){
			let confirmPassword = $("#confirmPassword").val();
			let password=$("#password").val();
			if(confirmPassword!=password){
				document.getElementById("messageTwo").style.display="inline";
				document.getElementById("messageTwo").innerText="请确认两次输入密码相同!";
			}else{
				document.getElementById("messageTwo").style.display="none";
			}
		}
		function checkPassword(){
			let password=$("#password").val();
			if(checkPwd(password)=="缺少内容,请确认是否同时包含大小写字母和数字"){
				// alert("密码格式要求:长度6~16位，必须由数字、大写字母、小写字母组成")
				document.getElementById("prompt").style.display="none";
				document.getElementById("message").style.display="inline";
				document.getElementById("message").innerText="缺少内容,请确认是否同时包含大小写字母和数字!";
			}else if(checkPwd(password)=="长度不合格"){
				document.getElementById("prompt").style.display="none";
				document.getElementById("message").style.display="inline";
				document.getElementById("message").innerText="长度不合格!长度6~16位";
			}
		}

	</script>
</body>
</html>